<template>
  <v-chart class="chart" :option="option" autoresize/>
</template>

<script setup lang="ts">
import VChart from "vue-echarts"
import {ref} from "vue"
import {defineModel} from 'vue'

const LineDate = defineModel('date');
const LineBorrow = defineModel('borrow');
const LineBack = defineModel('back');
// option主要数据
const option = ref(
    {
      title: {
        text: ' '
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['借阅数量', '归还数量',]
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          // saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: LineDate
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '借阅数量',
          type: 'line',
          smooth: true,
          stack: 'Total',
          data: LineBorrow
        },
        {
          name: '归还数量',
          type: 'line',
          smooth: true,
          stack: 'Total',
          data: LineBack
        },
      ]
    }
);

</script>

<style scoped>
.chart {
  width: 100%;
  height: 500px;
}
</style>